<template>
  <div class="courseShowOrHide">
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="dialogClose">
      <div class="header">
        <i class="el-icon-info"></i>
      </div>
      <div class="content">
        <div class="status">当前状态: {{ value | statusFilter }}</div>
        <el-form label-width="100px" size="small">
          <el-form-item label="状态变更为:">
            <el-select v-model="value" placeholder="请选择">
              <el-option label="已隐藏" :value="0"></el-option>
              <el-option label="待更新" :value="1"></el-option>
              <el-option label="已更新" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose" size="small">取 消</el-button>
        <el-button type="primary" @click="onSave" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { saveOrUpdateSection, saveOrUpdateLesson } from '@/services/course-sections'
export default {
  name: 'courseShowOrHide',
  data () {
    return {
      dialogVisible: false,
      options: [],
      value: 0,
      // 记录章节的id值
      sectionId: '',
      courseId: ''
    }
  },
  methods: {
    dialogClose () {
      this.dialogVisible = false
    },
    dialogOpen () {
      this.dialogVisible = true
    },
    // 改变章节状态
    changeSection (data) {
      this.dialogOpen()
      this.sectionId = data.id
    },
    async onSave () {
      // 存在章节id,那么更新章节内容
      if (this.sectionId) {
        const { data } = await saveOrUpdateSection({
          id: this.sectionId,
          status: this.value
        })
        if (data.code === '000000') {
          this.$message.success('状态更新成功')
          this.dialogClose()
          this.$emit('refresh')
        }
      } else {
        // 更新课时内容
        const { data } = await saveOrUpdateLesson({
          id: this.courseId,
          status: this.value
        })
        if (data.code === '000000') {
          this.$message.success('状态更新成功')
          this.dialogClose()
          this.$emit('refresh')
        }
      }
    },
    // 改变课时状态
    async changeCourse (data) {
      this.dialogOpen()
      console.log(data)
      this.courseId = data.id
      this.value = data.status
    }
  },
  filters: {
    statusFilter (val) {
      if (val === 0) {
        return '已隐藏'
      } else if (val === 1) {
        return '待更新'
      } else {
        return '已更新'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog__body{
  .header{
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
    .el-icon-info {
      font-size: 50px;
    }
  }
  .content{
    .status{
      margin-left: 50%;
      transform: translateX(-40%);
      width: 80%;
      height: 30px;
      font-size: 18px;
      margin-bottom: 15px;
    }
  }
}
</style>
